/* 外层容器·遮罩层 */
.magnifier {
  width: 100%;
  height: 100%;

  position: fixed;
  top: 0;
  left: 0;

  z-index: 10000;
}

/* 屏幕截图 */
.magnifier__screenshots {
  width: 100%;
  height: 100%;

  position: absolute;
  top: 0;
  left: 0;

  /* 作为放大镜源数据，无需呈现给用户 */
  opacity: 0;
  z-index: -1;
}

/* 裁剪区域 */
.magnifier__cropBox {
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  border: 1px dashed red;
  /** 由于裁剪区域在拖拽区域之上，为了不影响拖拽事件，需设置此属性用于事件穿透 */
  pointer-events: none;

  position: absolute;
  top: 0;
  left: 0;
}

/* 放大镜 & 缩放区域 */
.magnifier__magnifier {
  box-sizing: border-box;
  border: 2px dashed #7b68ee;
  /* 拖拽区域在此元素内部，这里是让拖拽元素在内部居中 */
  display: flex;
  justify-content: center;
  align-items: center;

  cursor: crosshair;

  position: absolute;
  top: 0;
  left: 0;
}

/* 拖拽元素 */
.magnifier__dragBox {
  box-sizing: border-box;
  border: 1px dashed green;
  cursor: move;
}

/* 放大镜呈现内容 */
.magnifier__scaleImg {
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
